<template>
	<view class="container">
		<!-- 游戏画布 -->
		<canvas canvas-id="snakeCanvas" id="snakeCanvas" class="snake-canvas" @touchstart="handleTouch"></canvas>

		<!-- 控制按钮 -->
		<view class="control-panel">
			<view class="control-row">
				<view class="control-btn"></view>
				<view class="control-btn control-up" @click="handleDirection('up')">上</view>
				<view class="control-btn"></view>
			</view>
			<view class="control-row">
				<view class="control-btn control-left" @click="handleDirection('left')">左</view>
				<view class="control-btn control-center" @click="togglePause">{{isPaused ? '继续' : '暂停'}}</view>
				<view class="control-btn control-right" @click="handleDirection('right')">右</view>
			</view>
			<view class="control-row">
				<view class="control-btn"></view>
				<view class="control-btn control-down" @click="handleDirection('down')">下</view>
				<view class="control-btn"></view>
			</view>
		</view>

		<!-- 返回按钮 -->
		<view class="back-btn" @click="goBack">返回主页</view>
	</view>
</template>

<script>
	import {
		SnakeGame,
		Direction,
		GameState
	} from '../../common/js/game.js';
	
	export default {
		data() {
			return {
				game: null,
				canvasContext:null,
				canvasWidth: 300,
				canvasHeight:300,
				isPaused:false
			}
		},
		onLoad() {
			//获取设备信息
			const systemInfo = uni.getSystemInfoSync()
			
			//设置画布大小（根据屏幕宽度调整）
			this.canvasWidth = systemInfo.windowWidth * 0.9
			this.canvasHeight = this.canvasWidth
			
			//延迟初始化，确保画布已经渲染
			setTimeout(()=> {
				this.initGame()
			},100)
		},
		methods: {
			//初始化游戏
			initGame() {
				//使用 uni-app 提供的统一 API 获取 Canvas 上下文
				const ctx = uni.createCanvasContext('snakeCanvas', this)
				
				//保存上下文
				this.canvasContext = ctx
				
				//创建游戏实例
				this.game = new SnakeGame({
					ctx: ctx,
					width: this.canvasWidth,
					height: this.canvasHeight,
					gridSize: 15,
					speed:200
				})
				
				//开始游戏
				this.game.start()
			},
			//处理方向控制
			handleDirection(direction) {
				if(!this.game) return
				
				switch(direction) {
					case 'up':
					this.game.changeDirection(Direction.UP)
					break
					case 'right':
					this.game.changeDirection(Direction.RIGHT)
					break
					case 'down':
					this.game.changeDirection(Direction.DOWN)
					break
					case 'left':
					this.game.changeDirection(Direction.LEFT)
					break
				}
			},
			
			//处理触摸事件
			handleTouch(e){
				if(!this.game) return
				
				//如果游戏结束，重新开始
				if(this.game.state === GameState.OVER) {
					this.game.restart()
					this.isPaused = false
					return
				}
				
				//如果游戏暂停，继续游戏
				if(this.game.state === GameState.PAUSED) {
					this.game.start()
					this.isPaused = false
					return
				}
				
				//如果游戏进行中，暂停游戏
				if(this.game.state === GameState.PLAYING) {
					this.game.pause()
					this.isPaused = false
					return
				}
				
				//获取触摸点坐标
				const touch = e.touches[0]
				const x = touch.x
				const y = touch.y
				
				//计算触摸点相对于画布中心的位置
				const centerX = this.canvasWidth / 2
				const centerY = this.canvasHeight / 2
				const dx = x - centerX
				const dy = y - centerY
				
				//根据触摸位置确定方向
				if(Math.abs(dx) > Math.abs(dy)) {
					//水平方向
					if(dx > 0){
						this.handleDirection('right')
					}else {
						this.handleDirection('left')
					}
				}else {
					//垂直方向
					if(dy > 0){
						this.handleDirection('down')
					}else {
						this.handleDirection('up')
					}
				}
			},
			//切换暂停/继续
			togglePause() {
				if(!this.game) return
				
				if(this.game.state === GameState.PLAYING) {
					this.game.pause()
					this.isPaused = true
				}else if(this.game.state === GameState.PAUSED){
					this.game.start()
					this.isPaused = false
				}
			},
			//返回主页
			goBack() {
				//停止游戏
				if(this.game){
					this.game.pause()
				}
				
				//返回主页
				uni.navigateBack()
			}
		},
		onUnload(){
			//页面卸载时停止游戏
			if(this.game){
				this.game.pause()
				this.game = null
			}
		}
	}
</script>

<style>
	.container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  height: 100vh;
	  background-color: #dbe1ff;
	  padding: 20rpx;
	}
	
	.snake-canvas {
	  width: 90vw;
	  height: 90vw;
	  border-radius: 20rpx;
	  background-color: #e7f4ff;
	  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
	  margin-bottom: 30rpx;
	}
	
	.control-panel {
	  width: 90vw;
	  background-color: #e7f4ff;
	  border-radius: 20rpx;
	  padding: 20rpx;
	  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
	}
	
	.control-row {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 15rpx;
	}
	
	.control-btn {
	  width: 130rpx;
	  height: 130rpx;
	  border-radius: 50%;
	  display: flex;
	  margin: 2rpx;
	  justify-content: center;
	  align-items: center;
	  font-size: 42rpx;
	  color: white;
	  
	}
	
	.control-up {
	  background-color: #0072ff;
	  box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
	}
	
	.control-down {
	  background-color: #ff758c;
	  box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
	}
	
	.control-left {
	  background-color: #ff9a9e;
	  box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
	}
	
	.control-right {
	  background-color: #a18cd1;
	  box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
	}
	
	.control-center {
	  background-color: #ffcc33;
	  width: 140rpx;
	  height: 140rpx;
	  font-size: 42rpx;
	}
	
	.back-btn {
	  margin-top: 40rpx;
	  padding: 15rpx 40rpx;
	  background-color: #ffffff;
	  border-radius: 40rpx;
	  color: #0072ff;
	  font-size: 30rpx;
	  box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
	}
</style>